import { Table, Card } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { reqGetCityList } from '@api/hospital/hospitalList';
import { CityItem, CityList } from '@api/hospital/model/hospitalListtypes';
import { useEffect, useState } from 'react';
import { RightOutlined, DownOutlined } from '@ant-design/icons';


const columns: ColumnsType<CityItem> = [
    {
        title: '名称',
        dataIndex: 'name'
    },
    {
        title: '编码',
        dataIndex: 'dictCode',
    },
    {
        title: '值',
        dataIndex: 'value',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
    },
]

export default function Dict() {
    const [dataList, setDataList] = useState<CityList>([])
    //获取数据列表
    const getDataList = async () => {
        const dataList = await reqGetCityList(1)
        setDataList(
            dataList.map((item) => {
                return { ...item, children: [] }
            })
        )
    }



    useEffect(() => {
        getDataList()
    }, [])


    const upDataList = (dataList:CityList, id:number, list: CityList) => {
        const newDataList = dataList.map((data) => {
            if (data.id === id) {
                return {
                    ...data,
                    children: list,
                }
            }

            if (data.children?.length) {
                const dataChildren = upDataList(data.children,id,list)
                data.children = dataChildren
            }

            return data;
        })
        return newDataList
    }
    //点击展开事件
    const onExpand = async (expanded: boolean, record: CityItem) => {
        if (!expanded || record.children.length) return;
        let list = await reqGetCityList(record.id)
        list = list.map((item) => {
            return item.hasChildren ? {
                ...item,
                children: []
            } : item
        })
        const newDataList = upDataList (dataList, record.id, list)
        /* setDataList(
            dataList.map((data) => {
                if (data.id === record.id) {
                    return {
                        ...data,
                        children: list,
                    }
                }
                return data;
            })
        ) */
        setDataList(newDataList)
    }


    return (
        <Card>
            <Table columns={columns} dataSource={dataList} bordered rowKey="id" pagination={false}
                expandable={{
                    onExpand,
                    expandIcon: ({ expanded, record, onExpand }) => {
                        if (!record.hasChildren) {
                            return <div style={{ display: 'inline-block', width: 24, height: 10 }}></div>
                        }
                        return expanded ? (
                            <DownOutlined style={{ marginRight: 10 }} onClick={(e) => { onExpand(record, e) }} />
                        ) : (
                            <RightOutlined style={{ marginRight: 10 }} onClick={(e) => { onExpand(record, e) }} />
                        )

                    }
                }}
            />
        </Card>
    )
}